// 售后维权
<template>
  <div class="AfterSale">
    <ul class="title">
      <li v-for="(item,key) in title" :key="key" class="active" @click="changesjump($event,key)">
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>
    <div class="content" v-if="!empty">
      <!-- <div class="seach">
        <el-form :inline="true" :model="select" class="demo-form-inline" size="mini">
          <el-form-item label="售后类型：">
            <el-select v-model="select.afterSaleType" placeholder="全部">
              <el-option label="区域一" value="quyu1"></el-option>
              <el-option label="区域二" value="quyu2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态：">
            <el-select v-model="select.processingState" placeholder="全部">
              <el-option label="区域三" value="quyu3"></el-option>
              <el-option label="区域四" value="quyu4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查 询</el-button>
          </el-form-item>
        </el-form>
        <div class="inputk">
          <el-input v-model="value" placeholder="请输入订单号/合同号/商品名称" size="mini"></el-input>
          <el-button type="primary" @click="clickSearch" size="mini">搜 索</el-button>
        </div>
      </div> -->
      <br>
      <p class="Tips">温馨提示：售后退款实际到账时间可能稍有延迟，请耐心等待，如有问题请联系孚地客服。</p>

      <div class="details">
        <ul>
          <li v-for="(item,index) in titles" :key="index">{{ item }}</li>
        </ul>

        <ol>
          <li v-for="item in listData" :key="item.order_no">
            <p>
              <span>订单编号：{{item.order_no}}</span>
              <span>退款编号：{{item.refund_no}}</span>
            </p>
            <div class="detailsContents">
              <div class="goods">
                <img :src="item.goods_logo">
                <div>
                  <span>{{item.goods_title}}</span>
                </div>
              </div>
              <div class="Amount">{{`￥${item.selling_price*item.refund_num}`}}</div>
              <div class="time">{{item.create_at}}</div>
              <div class="type">退货退款</div>
              <div class="status" v-if="item.status == 4">申请退款/退货</div>
              <div class="status" v-else-if="item.status == 5">已退货及退款</div>
              <div class="status" v-else-if="item.status == 6">退款/退货驳回</div>
              <div class="status" v-else-if="item.status == 7">同意退货</div>
              <div class="status" v-else-if="item.status == 8">收到退款商品</div>
              <div class="status" v-else-if="item.status == 9">同意退款</div>
              <div class="status" v-else-if="item.status == 10">退款完成</div>
            </div>
          </li>
        </ol>

      </div>

    </div>

    <div class="empty" v-if="empty">您尚未存在任何退货退款订单~</div>
  </div>
</template>
<script>
export default {
  name: "AfterSale",


  data() {
    return {
      listData:[],
      empty: false, // 内容为空时候的展示字段
      select: {
        // 帅选的值的绑定
        afterSaleType: "",
        processingState: ""
      },
      value: "", // 搜索的值得双向绑定
      title: [
        {
          name: "退款管理",
          id: 0
        }
      ],
      titles: ["商品", "退款金额", "申请时间", "售后类型", "处理状态"]
    }
  },

  methods: {

    // 获取数据列表
    async getlists(){
      let user_id = this.$store.state.UserInfor.user_id
      let res = await this.$http({
        method: 'post',
        url:'/api/index/api/refundManagement',
        data: {
          user_id,
        }
      })
      if(res.data.State.Code == 200){
        this.listData = res.data.data
      }
      console.log(res)
    },
    // 退款管理的导航的切换
    changesjump(ev, key) {
      this.index = key
      console.log(this.index)
    },
    // 筛选表单的提交
    onSubmit() {
      console.log(this.select)
    },
    // 搜索的点击按键
    clickSearch() { 

    }
  },
  mounted() {
    this.getlists()
  }

}
</script>
<style lang="scss" scoped>
.AfterSale {
  width: 970px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .content {
    .seach {
      width: 100%;
      display: flex;
      flex-direction: row;
      .el-form {
        margin: 20px 0px;
        .el-input {
          width: 79%;
          border-radius: 0px;
        }
        /deep/ .el-input__inner {
          border-radius: 0px;
        }
        /deep/ .el-button,
        .el-button--mini {
          border-radius: 0px;
        }
      }
      .inputk {
        flex: 1;
        margin: 21px 0px;
        .el-input {
          width: 77%;
          border-radius: 0px;
        }
        /deep/ .el-input__inner {
          border-radius: 0px;
        }
        /deep/ .el-button,
        .el-button--mini {
          border-radius: 0px;
        }
      }
    }
    .Tips {
      color: #878787;
      font-size: 12px;
      margin-bottom: 20px;
    }
    .details {
      ul {
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: row;
        background: #fafafa;
        border: 1px solid #e3e3e3;
        color: #555555;
        font-size: 12px;
        margin-bottom: 16px;
        li {
          text-align: center;
          line-height: 40px;
          &:nth-child(1) {
            flex: 1;
          }
          &:nth-child(2),
          &:nth-child(4),
          &:nth-child(5) {
            width: 120px;
          }
          &:nth-child(3) {
            width: 200px;
          }
        }
      }
      ol {
        li {
          border: 1px solid #e3e3e3;
          p {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #fafafa;
            color: #555555;
            font-size: 12px;
            span {
              margin: 0 40px;
            }
          }
          .detailsContents {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 12px;
            .goods {
              flex: 1;
              display: flex;
              flex-direction: row;
              align-items: center;
              img {
                width: 68px;
                height: 68px;
                margin: 10px 20px;
              }
              div {
                span {
                  width: 214px;
                  display: block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  line-height: 28px;
                }
                i {
                  display: block;
                  color: #8d8d8d;
                  line-height: 20px;
                }
              }
            }
            .Amount,
            .type,
            .status {
              width: 120px;
              color: #ff0000;
              text-align: center;
            }
            .time {
              width: 200px;
              text-align: center;
              color: 3f3f3f;
            }
          }
        }
      }
    }
  }

  .empty {
    width: 100%;
    height: 400px;
    margin-top: 20px;
    font-size: 30px;
    line-height: 400px;
    text-align: center;
    color: #dbdbdb;
    border: 1px dashed #dbdbdb;
    letter-spacing: 2px;
  }
}
</style>


